﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Role.aspx.cs" Inherits="WebApplication01.Role" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>角色管理</title>
    <link href="Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrapTable/bootstrap-table.css" rel="stylesheet" />

    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Content/bootstrapTable/bootstrap-table.js"></script>
    <script src="Content/bootstrapTable/bootstrap-table-zh-CN.js"></script>
    <script>
        $(function () {
            getData();
            $("#btnQuery").click(function () {
                Search();
            })
            $("#btnAdd").click(function () {
                $("#myModal").modal({
                    backdrop: 'static'
                })
                $("#txtRoleName").val("");
                $("#txtRolereMark").val("");
                $("#hid").val("")
            })
            //提交按钮事件
            $("#Save").click(function () {
                $.ajax({
                    url: "AssetHandel/RoleHandler.ashx",
                    type: "post",
                    data: {
                        rName: $("#txtRoleName").val(),
                        ReMark: $("#txtRolereMark").val(),
                        sType: "save",
                        ID: $("#hid").val()
                    },
                    success: function (data) {
                        if (data == "OK") {
                            alert("操作成功");
                            $("#myModal").modal("hide");
                            Search();
                        }
                        else {
                            alert("操作失败");
                        }
                    },
                })

            });
        })
        function getData() {
            $("#tblTable").bootstrapTable({
                url: "AssetHandel/RoleHandler.ashx?sType=list",
                pagination: true,
                sidePagination: "server",
                striped: true,
                pageNumber: 1,
                pageSize: 5,
                pageList: [5, 10, 25, 50, 100],
                queryParams: function (params) {
                    var temp = {
                        roleName: $("#name").val(),
                        limit: params.limit,
                        offset: params.offset
                    };
                    return temp;
                },
                columns: [
                    {
                        checkbox: true,
                    },
                    { field: 'RoleID', title: '角色ID', width: 10 },
                    { field: 'RoleName', title: '角色名称', width: 80 },
                    { field: 'RoleReMark', title: '角色说明', width: 80 },
                    {
                        field: '', title: '操作', width: 40, formatter: function (value, row, index) {
                            return '<button type="button" class="btn btn-warning btn-sm" onclick="Exit(' + index + ')">编辑</button>&nbsp;&nbsp;<button type="button" class="btn btn-danger" onclick="Delete(' + row.RoleID + ')">删除</button>';
                        }
                    },
                ]

            })
        }

        function Search() {
            $("#tblTable").bootstrapTable("refresh");
        }

        function Exit(index) {
            $("#myModal").modal({
                backdrop: 'static',
            })
            var data = $("#tblTable").bootstrapTable("getData");
            $("#hid").val(data[index]["RoleID"]);
            $("#txtRoleName").val(data[index]["RoleName"]);
            $("#txtRolereMark").val(data[index]["RoleReMark"]);
        }
        function Delete(Rid) {
            if (confirm("确认删除吗？")) {
                $.ajax({
                    type: "post",
                    url: "AssetHandel/RoleHandler.ashx",
                    data: {sType: "Delete", ID: Rid},
                    success: function (value) {
                        if (value == "OK") {
                            alert("已成功删除！");
                            Search();
                        }
                        else {
                            alert("删除失败！！！！");
                        }
                    }

                })
            }
        }
    </script>
</head>
<body>
    <div class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="name">角色名称</label>
            <input type="text" class="form-control" id="name" placeholder="请输入角色名称" />
            <button type="button" id="btnQuery" class="btn btn-primary">查询</button>
            <button type="button" id="btnAdd" class="btn btn-primary">添加</button>
        </div>
    </div>
    <table id="tblTable"></table>
    <%-- 模态框--%>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">角色信息
                    </h4>
                </div>
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="txtRoleName" class="col-sm-2 control-label">角色名称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="txtRoleName"
                                placeholder="请输入角色名" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtRoleName" class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="txtRolereMark"
                                placeholder="请输入角色备注" />
                        </div>
                    </div>
                </form>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                        关闭
                    </button>
                    <input id="hid" type="hidden" />
                    <button type="button" class="btn btn-primary" id="Save">
                        提交更改
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
</body>
</html>
